<template>
	<div class="content55 personal">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">出金記録</div>
		</header>
		<div class="list" v-if="data" v-for="(v,i) in data">
			<div class="item">
				<div class="title" style="color: #393d49;">撤回する</div>
				<div class="money">{{initData.currency}}{{v.money}}</div>
			</div>
			<div class="item" style="display: none;">
				<div class="child_title">ローンの進捗状況</div>
				<div class="progress">
					<progress-bar :progress="v.progress_bar"></progress-bar>
				</div>
				<!-- <div class="status" v-if="v.status==0">待提款</div>
				<div class="status" v-else>已提款</div> -->
			</div>
			<div class="item">
				<div class="child_title" style="color: #393d49;">申請時間</div>
				<div class="status" style="color: #393d49;">{{v.createtime}}</div>
			</div>
			
			<div class="item">
				<div class="child_title" style="color: #393d49;">州</div>
				<div class="status" v-if="v.status==0" style="color: #393d49;">審査待ち</div>
				<div class="status" v-if="v.status==2" style="color: #393d49;">審査待ち</div>
				<div class="status" v-if="v.status==1" style="color: #1bd4b0;">合格した</div>
				<div class="status" v-if="v.status==-1" style="color: #f44336;">拒否されました</div>
			</div>
		</div>
		
		<div class="empty_box" v-else>
			<img  src="../../../public/img/empty.png" class="empty"/>
			<div class="empty-title">データなし</div>
		</div>
	</div>
</template>

<script>
	import AJAX from '@/utils/http'
	import ProgressBar from './ProgressBar.vue';
	export default {
		components: {
			ProgressBar
		},
		data() {
			return {
				data: {},
				progress: 10,
				initData:{},
			};
		},
		created() {
			this.init();
			this.fetchData();

		},
		mounted() {
			this.picker_loading = true;
		},
		methods: {
			fetchData() {
				AJAX.post('/user/withdrawList', {}).then(e => {
					
					if (e.data.list) {
						this.data = e.data.list;
					}
				});
			},
			init(){
				AJAX.post('/index/init', {}, {
					showLoading: false
				}).then(e => {
					this.initData = e.data;	
				});
			},

		}
	};
</script>

<style scoped>
	.personal {
		/* padding-left: 16px;
		padding-right: 16px; */
		background: #eff2f6;
	}

	.ditem {
		margin-top: 12px;
	}

	.list {
		width: 100%;
		/* height: 3rem; */
		background-color: #fff;
		overflow: hidden;
		color: #323233;
		margin-bottom: 5px;
		padding-bottom: 5px;
	}

	.item {
		display: flex;
		justify-content: space-between;
		padding: 0.2rem 0.8rem;
	}

	.title {
		font-size: 0.4rem;
	}

	.money {
		font-size: 0.4rem;
		color: rgb(255, 123, 53);
		font-style: italic;
		word-wrap: break-word;
		letter-spacing: 2px;
	}

	.child_title {
		color: #969799;
		font-size: 0.33rem;
		line-height: 0.48rem;
		
	}

	.status {
		color: #969799;
		font-size: 0.37rem;
		font-style: italic;
		word-wrap: break-word
	}

	.progress {
		width: 150px;
	}
	.progress-bar-container{
		margin-top: 0.1rem;
	}
	
	.empty_box{
		width: 100%;
	}
	.empty{
		width: 5rem;
		height: 5rem;
		margin: auto;
		display: block;
	}
	.empty-title{
		text-align: center;
		font-size: 15px;
		color: #969799;
	}
</style>